<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          责任单位综合考核结果
          <!-- <navigation /> -->
        </span>
        <el-button size="small" style="float: right;" type="primary" @click="addPermiss">添加</el-button>
      </div>
      <div class="Top">
        <el-form :inline="true" :model="searchList" class="demo-form-inline">
          <el-form-item label="年份">
            <el-date-picker
              v-model="searchList.year"
              type="year"
              size="medium"
              value-format="yyyy"
              placeholder="选择年"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="行政区">
            <el-select v-model="searchList.departmentTypeId" size="medium" placeholder="请选择">
              <el-option
                v-for="item in deptTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上下半年">
            <el-select size="medium" v-model="searchList.timeNode" clearable>
              <el-option
                v-for="(item, index) in secondList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="getTabData()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:700px;">
            <el-table
              :header-cell-style="{ background: '#f5f5f5' }"
              class="perTabSty"
              :data="tableData"
              style="width: 50%;margin-bottom: 20px;"
              row-key="id"
              border
              height="650px"
            >
              <el-table-column align="center" prop="departmentName" :label="reversedMessage"></el-table-column>
              <el-table-column align="center" :label="reverseDresult">
                <el-table-column width="150" align="center" prop="score" label="分数"></el-table-column>
                <el-table-column width="150" align="center" prop="rank" label="排名"></el-table-column>
              </el-table-column>
              <el-table-column align="center" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button @click="editPermiss(scope.row)" type="text">编辑</el-button>
                  <el-button @click="removePermiss(scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
      <!-- 弹框 -->
      <el-dialog
        style="width:56%;margin-left:22%"
        title="得分排名"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form label-width="130px" :model="dutyFrom" :hide-required-asterisk="false">
          <el-form-item label="地区：" prop="type">
            <el-cascader
              style="width:80%;"
              v-model="dutyFrom.departmentId"
              :options="deptTypeList"
              :props="departmentProp"
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="年份：" prop="type">
            <el-date-picker
              v-model="dutyFrom.year"
              style="width:80%"
              value-format="yyyy"
              type="year"
              placeholder="选择年"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="上下半年：" prop="type">
            <el-select class="userIntinput" v-model="dutyFrom.timeNode" clearable>
              <el-option
                v-for="(item, index) in secondList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="综合得分：" prop="name">
            <el-input class="userIntinput" v-model="dutyFrom.score" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="排名：" prop="rank">
            <el-input class="userIntinput" v-model="dutyFrom.rank" clearable placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 弹框显示隐藏
      dialogFormVisible: false,
      deptTypeList: [],
      secondList: [
        {
          name: "上半年",
          id: 1,
        },
        {
          name: "下半年",
          id: 2,
        },
      ],
      departmentName: "",
      // 表单数据
      dutyFrom: {
        departmentId: "",
        year: "",
        score: "", //分数
        timeNode: "",
        rank: "", //排名
        id: "",
      },
      searchList: {
        year: "2020",
        timeNode: 1,
        departmentTypeId: 2,
      },
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
      typeList: [
        { id: 1, name: "负面清单" },
        { id: 2, name: "日常工作台账" },
      ],
    };
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      let text = "";
      let _Type = +this.searchList.departmentTypeId;
      if (_Type == 1) {
        text = "市级部门";
      } else if (_Type == 2) {
        text = "区县";
      } else if (_Type == 3) {
        text = "开发区";
      } else if (_Type == 4) {
        text = "西咸新区";
      }
      return text;
    },
    reverseDresult: function () {
      let text = "";
      let _Type = +this.searchList.timeNode;
      if (_Type == 1) {
        text = "上半年考核结果";
      } else if (_Type == 2) {
        text = "下半年考核结果";
      }
      return text;
    },
  },
  mounted() {
    this.getTabData();
    this.getdepartmentTypeList();
  },
  methods: {
    //   获取表格数据
    getTabData() {
      let _searchList = JSON.parse(JSON.stringify(this.searchList));
      _searchList.departmentTypeId = +_searchList.departmentTypeId.toString();
      this.$axios
        .post("/departmentCountySummary/getList", _searchList)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加权限
    addPermiss() {
      this.dialogFormVisible = true;
    },
    // 编辑权限
    editPermiss(row) {
      this.dialogFormVisible = true;
      this.dutyFrom.id = row.id;
      this.dutyFrom.year = row.year.toString();
      this.dutyFrom.timeNode = row.timeNode;
      this.dutyFrom.rank = row.rank;
      this.dutyFrom.score = row.score;
      this.dutyFrom.departmentId = [row.departmentTypeId, row.departmentId];
    },
    // 删除权限
    removePermiss(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.$axios
            .post("/departmentCountySummary/remove", { id: row.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getTabData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {});
    },
    // 部门类型
    getdepartmentTypeList() {
      this.$axios
        .post("dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            res.data.splice(4, 1);
            let arr = res.data;
            let x = 3,
              y = 4;
            arr.splice(x - 1, 1, ...arr.splice(y - 1, 1, arr[x - 1]));
            arr.splice(0, 1);
            this.deptTypeList = arr;
            console.log(this.deptTypeList, 999);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新增权限
    addPerFun(data) {
      this.$axios
        .post("negativeSource/addSource", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("negativeSource/updateSource", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存
    submitForm() {
      if (this.dutyFrom.score == "" || this.dutyFrom.rank == "") {
        this.$message.error("请填写完所有输入框");
        return;
      }

      let _path = "/departmentCountySummary/add";
      if (this.dutyFrom.id) {
        _path = "/departmentCountySummary/update";
      }
      let _dutyFrom = JSON.parse(JSON.stringify(this.dutyFrom));
      _dutyFrom.departmentId = _dutyFrom.departmentId.pop();
      this.$axios
        .post(`${_path}`, _dutyFrom)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "数据更新成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });

      this.dialogFormVisible = false;
      this.closeDialog();
    },
    // 清空数据
    closeDialog() {
      this.dutyFrom = {
        departmentId: "",
        year: "",
        score: "",
        timeNode: "",
        rank: "",
        id: "",
      };
    },
  },
};
</script>
<style scoped>
.userIntinput {
  width: 80%;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
</style>
<style>
.perTabSty .el-table__row:hover > td {
  background: #e9eeff !important;
}
</style>
